<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- Mustache 语法
         0.变量
         1.运算
         2.三元运算符
         3.不能放js语句 定义变量，赋值 ,定义函数
         4.函数返回值
         5.放对象时，左右两边需要空格
    -->
    <div id="app">
        <!-- {{msg>10?"a":"b"}} -->
        {{msg}}
        <!-- {{(function a(){return 10})()}} -->
        <!-- {{[1,2,3,4].map((item)=>{return item*2})}} -->
        <!-- {{ {name:'zf'} }}  -->
        {{obj}}
        <!-- {{arr}}  -->
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    //vm viewModel vue的实例
    let vm = new Vue({
         el:"#app",
         data:{  //data里放响应式数据
            msg:1,
            obj:{name:'zf'},
            arr:[1,2,{name:"zf"}]
         }    
    })
       //vm.$mount("#app");
       // vm.obj.age = 10;//vue不能直接操作根级别对象
       // console.log(vm.obj);
        //vm.$set(vm.obj,'age',10);  //vm.$set/vm.$delete
        //vm.arr[2].name="lucy"  //数组的对象是可以更改
        // vm.arr[4] = 5;   通过索引和长度是没法更改数组的
        // vm.arr.length = 10; 
        // vm.arr.push(5);
        //vm.arr.splice(1,1,222);

        //Object.defineProperty(obj,key,{})

        //vue实例的方法
        //vm.$el 获取挂载的根DOM元素
        //vm.$mount() 
        //vm.$set/vm.$delete
        //vm.$watch() 监视数据的变化
        //vm.$nextTick() 获取DOM元素
        //vm.$data
        //vm.$options 所有的配置项

       
        vm.$watch('msg',function(newVal,oldVal){
            console.log(newVal);
        })
        vm.msg = 10; //异步的过程
        //console.log(vm.$el.innerHTML)
        vm.$nextTick(function(){ //一旦这个方法触发了，就表示DOM已经渲染完成
            console.log(vm.$el.innerHTML)
        })
        

</script>